<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="header">
			<view class="searchBox" @click="goSearch">
				<u-icon name="search" color="rgba(202, 202, 202, 1)" size="22"></u-icon>
				<input class="searchInput" placeholder-class="searchPlaceholder" type="text" placeholder="天养"  v-model="ss_content">
			</view>
			<view class="text_x margin_left3" style="color: #F3271C;"  @click="search">搜索</view>
		</view>
		<!-- 历史搜索 -->
		<view class="margin_top" v-if="ss_ls.length">
			<view class="flexbetween">
				<view class="text_w color_six">历史搜索</view>
				<view  @click="empty">
					<u-icon name="trash" color="rgba(102, 102, 102, 1)" size="20"></u-icon>
				</view>
			</view>
			<view class="flexleft flex_wrap">
				<view class="margin_right3 historySearch margin_top text_b color_san" v-for="(item, index) in ss_ls" :key="index" @click="clickssls(item)">{{item}}</view>
			</view>
		</view>
		<!-- 热门搜索 -->
		<view class="margin_top">
			<view class="flexbetween">
				<view class="text_w color_six">热门搜索</view>
			</view>
			<view class="flexleft flex_wrap">
				<view class="margin_right3 historySearch margin_top text_b color_san" v-for="(item,index) in 10">课程</view>
			</view>
		</view>
	</view>
</template>
<script>
	
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				ss_ls: [],
				ss_content: "",
			}
		},
		async onLoad() {
			let list = await uni.getStorage({
				key: 'searchList'
			});
			console.log(list);
			if (list.data) {
				this.ss_ls = JSON.parse(list.data);
			}
		},
		methods: {
			//清空历史记录
			empty() {
				httpRequest.toast("已清空")
				uni.removeStorage({
					key: 'searchList'
				});
				this.ss_ls = [];
			},
			// 搜索
			search() {
				let _this = this
				if (_this.ss_content == '') {
					httpRequest.toast("搜索内容不能为空")
					return false
				} else {
					if (!_this.ss_ls.includes(_this.ss_content)) {
						_this.ss_ls.unshift(_this.ss_content);
						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(_this.ss_ls)
						});
					} else {
						//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
						let i = _this.ss_ls.indexOf(_this.ss_content);
						_this.ss_ls.splice(i, 1);
						_this.ss_ls.unshift(_this.ss_content);
						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(_this.ss_ls)
						});
					}
				}
				let keywords = _this.ss_content
				uni.navigateTo({
					url: "/pages_index/goodsList?keywords=" + keywords
				})
			},
			clickssls(item) {
				let keywords = item
				uni.navigateTo({
					url: "/pages_index/goodsList?keywords=" + keywords
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		background-color: #FAFAFA;
		box-sizing: border-box;
	}

	// 搜索框
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.searchBox {
		padding: 18rpx 30rpx;
		background: #F3F3F3;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		flex: 1;

		.searchInput {
			margin-left: 20rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}

		.searchPlaceholder {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #C5C5C5;
		}
	}

	// 历史搜索
	.historySearch {
		padding: 10rpx 25rpx;
		background-color: #ffffff;
	}
</style>